import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:sinosheets/components/NetWorkImage/NetworkImageWidget.dart';
import 'package:sinosheets/components/no_data_widget.dart';
import 'package:sinosheets/route/route_utils.dart';

import 'logic.dart';

class CategoryPage extends StatefulWidget {
  const CategoryPage({Key? key}) : super(key: key);

  @override
  State<CategoryPage> createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  final CategoryLogic logic = Get.put(CategoryLogic());

  @override
  Widget build(BuildContext context) {
    return GetBuilder<CategoryLogic>(builder: (get) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Category', style: TextStyle(fontSize: 20.r, fontWeight: FontWeight.bold)),
          centerTitle: true,
        ),
        body: Row(
          children: [
            // 左侧一级分类
            Container(
              width: 100.r,
              color: Color(0xFFF7F7F7),
              child: ListView.builder(
                itemCount: get.leftList.length,
                itemBuilder: (context, idx) {
                  final item = get.leftList[idx];
                  final selected = idx == logic.selectedIndex;
                  return InkWell(
                    onTap: () {
                      get.selectedIndex = idx;
                      get.getCategoryList(idx);
                      get.update();
                    },
                    child: Container(
                      color: selected ? Colors.white : Color(0xFFF7F7F7),
                      height: 48.r,
                      alignment: Alignment.center,
                      child: Text(
                        item['nameEN'] ?? '',
                        style: TextStyle(
                          color: selected ? Color(0xFF2196F3) : Colors.black87,
                          fontWeight: selected ? FontWeight.bold : FontWeight.normal,
                          fontSize: 16.r,
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
            // 右侧二级分类
            Expanded(
              child: Container(
                color: Colors.white,
                padding: EdgeInsets.symmetric(vertical: 12.r, horizontal: 8.r),
                child: EasyRefresh(
                    controller: get.controller,
                    onRefresh: () async {
                      await get.onRefresh();
                    },
                    child: get.rightList.isEmpty
                        ? NoDataWidget.emptyList(
                            title: 'No Categories',
                            description: 'No subcategories found for this category. Please try another category.',
                            showButton: true,
                            buttonText: 'Refresh',
                            onButtonTap: () async {
                              await get.onRefresh();
                            },
                          )
                        : GridView.builder(
                            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisCount: 3,
                              mainAxisSpacing: 16.r,
                              crossAxisSpacing: 8.r,
                              childAspectRatio: 0.7,
                            ),
                            itemCount: get.rightList.length,
                            itemBuilder: (context, idx) {
                              final item = get.rightList[idx];
                              return GestureDetector(
                                onTap: () {
                                  RouteUtils.toCategoryProduct(categoryId: "${item['id']}", categoryName: item['nameEN'] ?? '');
                                },
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Container(
                                      width: 64.r,
                                      height: 64.r,
                                      decoration: BoxDecoration(
                                        color: Color(0xFFF7F7F7),
                                        borderRadius: BorderRadius.circular(12.r),
                                      ),
                                      clipBehavior: Clip.antiAlias,
                                      child: item['img'] != null && item['img'].toString().isNotEmpty ? NetworkImageWidget(url: item['img'], fit: BoxFit.cover) : Icon(Icons.image, size: 40.r, color: Colors.grey),
                                    ),
                                    SizedBox(height: 8.r),
                                    Text(
                                      item['nameEN'] ?? '',
                                      style: TextStyle(fontSize: 14.r),
                                      maxLines: 2,
                                      overflow: TextOverflow.ellipsis,
                                      textAlign: TextAlign.center,
                                    ),
                                  ],
                                ),
                              );
                            },
                          )),
              ),
            ),
          ],
        ),
      );
    });
  }

  @override
  void dispose() {
    Get.delete<CategoryLogic>();
    super.dispose();
  }
}
